<template>
	<!-- 企业列表 -->
	<scroll-view @scrolltolower="scrolltolower" :scroll-y="true" :class="pageClass" 
	:style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>

		
<!-- 		<view
			:style="'position: sticky; height:40px;border-bottom: 1px solid #f2f2f2;z-index:10;top:' + navHeight + 'px;'">

		</view> -->
		<view v-for="(list,key) in modData" :class="list.mod_class" :key="key" :style="list.css">
			<moxi-index v-if="list.name=='plugin_info_qiye'" :list="list" >
			<moxi-choose v-model="info" :type="2" :top="navHeight" @change="ch" :field="tagData"
			v-if="tagData.length"></moxi-choose>
		<view class="search" v-if="search==1">
			<u-search placeholder="请输入查询内容" v-model="searchText" :showAction="false"
			 bgColor="#fff"
				@search="searchBtn"></u-search>
		</view>
		
		<view v-if="type.id" style="margin: 10px;">
			<view style="background: #fff;" class="list " v-for="(item, index) in listsData"
			 :key="index" @click="goIndustry(item.id)">
				<view class="left-right">
					<view class="left">
						<div class="paihang" :style="{background:ph[index]?ph[index]:'#666'}" 
						v-if="index<type.ranking&&type.ranking>0&&(info.city==''&&info.search==''&&info.distance==''&&info.c_time=='')">{{index+1}}</div>
						<img :src="item.logo" style="border-radius: 4px;;">
					</view>
					<view class="right" style="display: flex;flex-direction: column;justify-content: space-between;">
						<view class="title">{{item.name}}</view>
						
						<view class="types" :style="'color: '+app_color+';font-weight: 600;'" 
						v-if="type.operate==1&&item.operate&&item.operate.length">{{item.operate}}</view>
						<template>
							<view  style="display: flex;flex-direction: row;margin-top: 5px;
  white-space: nowrap;text-overflow:ellipsis;overflow:hidden;" v-if="item.tag&&item.tag.length&&type.show_tag>0">
								<text class="type-tag" v-for="(t,k) in item.tag" v-if="k<type.show_tag">{{t}}</text>
							</view>
							
						</template>
						<view
							style="z-index: 1;margin-top: 10px;display: flex;;flex-direction: row;justify-content: space-between;">
							<view class="address" style="font-size: 12px;color: #666;">{{item.province}} - {{item.city}}</view>
							<u-rate :count="count" v-model="item.rate/2" allowHalf :readonly="true" :minCount="0"
								:activeColor="app_color"></u-rate>
						</view>
						
					</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: center;">
			<u-divider style="padding-bottom: 10px;" text="没有更多内容了" v-if="hasMore == false"></u-divider>
			
		
			</view>
			<view v-if="type.default_order&&type.default_order==2&&hasMore == false&&!listsData.length"
			style="display: flex;flex-direction: row;justify-content: center;margin: 10px 0;">
				<view style="width: 100px;" @click="gengduo()">
					<u-button text="查看更多" icon="more-dot-fill" iconColor="#fff" :color="app_color" size="small"></u-button>
				</view>
			</view>
		</view>
		</moxi-index>
		<moxi-index v-else :list="list"></moxi-index>
			</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				ph:{
					0:"#ff0000",
					1:"#ff5500",
					2:"#ffaa00"
				},
				info: {
					// id: "",
					page: 1,
					page_num: 6,
					la: "",
					ln: "",
					province: "",
					city: "",
					type: "",
					search: "",
					tag: [],
					type_list:"",
					time: "",
					distance: "", //距离排列方式asc,desc
					c_time: "", //排列方式asc,desc
					rate: "", //排列方式asc,desc
					view: "",
					// check_tag:[]
				},
				hasMore: true,
				listsData: [],
				tagData: [],
				searchText: '',
				showBang:false,
				type:{},
				isGet:false,
				search:0
			}
		},
		onLoad() {
			if (this.param.type) {
				this.info.type = this.param.type
			}
			
			this.locationInit()
			setTimeout(()=>{
				if(!this.isGet){
					this.get()
				}
			},3000)
			
		},
		methods: {
			gengduo(){
				this.info.distance = 'asc';
				this.info.province = 'all';
				this.clear()
				this.get()
			},
			locationInit(){
				let self = this;
				this.moxiGetLocation((res)=>{
					if(res.latitude){
						self.info.la = res.latitude;
						self.info.ln = res.longitude;
						if(this.isGet){
							self.clear();
							let s = setInterval(()=>{
								if(self.pageReady){
									self.get()
									clearInterval(s)
								}
							},300)
						}else{
							let s = setInterval(()=>{
								if(self.pageReady){
									self.get()
									clearInterval(s)
								}
							},300)
						}
					}else{
						self.get()
						// self.getLocationShowBox()
					}
				})
			},
			getLocationShowBox(){
				let self = this;
				uni.showModal({
					title: '当前服务需要获取您的位置',
					content: '请将位置信息设置成“使用小程序时允许”',
					success: function (res) {
						if (res.confirm) {
							 self.openSet()
						} else if (res.cancel) {
							let page = getCurrentPages();
							if(page.length>1){
								uni.navigateBack();
							}else{
								uni.redirectTo({
									url: '/pages/index/index'
								});
							}
						}
					},fail:function(er){
						console.log(er);
					}
				});
			},
			openSet(){
				let self = this;
				uni.openSetting({
				  success(res) {
				   if(res.authSetting['scope.userLocation']){
					   self.locationInit()
				   }else{
					   self.getLocationShowBox()
				   }
				  }
				});
			},
			ch(v) {
				// this.info = v
				// this.info.concat(v)
				this.info = Object.assign(this.info, v);
				// this.showBang = false
				this.clear()
				this.get()
			},
			searchBtn() {
				this.clear()
				this.searchText = this.searchText.trim()
				this.info.search = this.searchText
				this.get()
			},
			// 触底加载
			scrolltolower() {
				if (this.hasMore) {
					this.info.page++
					this.get()
				}
			},
			// 获取数据
			get() {
				console.log(this.pageReady);
				if (!this.hasMore) {
					return false;
				}
				this.isGet = true;
				let self = this
				
				this.moxiPost('/plugin/info/index/info/get_company', this.info, (data)=> {
					console.log(data);
					this.showBang = false;
					if(data.type){
						if(data.type.search){
							this.search = 1;
						}
						if(data.type.ranking>0){
							if(this.info.search==''&&this.info.rate==''&&this.info.distance==''&&!this.info.tag.length&&self.info.province==''){
								this.showBang = true;
							}
						}
					}
					if (data.data.allpage <= this.info.page) {
						this.hasMore = false;
					}
					self.type = data.type;
					if(data.check){
						self.tagData = data.check
					}
					data.data.data.forEach(item => {
						self.listsData.push(item)
					})

				})
			},
			clear() {
				this.hasMore = true
				this.info.page = 1
				this.listsData = []
			},
			goIndustry(id) {
				this.navto('plugin_info/industry?id=' + id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choose-box{
		display: flex;flex-direction: column;padding: 10px;background: #fff;margin-bottom: 15px;
	}
	.choose-title{
		display: flex;flex-direction: row;font-size: 14px;padding-bottom: 10px;margin-bottom: 10px;
		border-bottom: 1px #eee solid;
	}
	.choose-title text{
		margin-left: 5px;
	}
	.choose-list{
		display: flex;flex-direction: row;justify-content: space-between;font-size: 14px;color: #666;
		padding: 10px 0;
		
	}
	.choose-name{
		display: flex;width: 100px;flex-shrink: 0
	}
	.choose-value{
		flex-wrap: nowrap;overflow-x: hidden;display: flex;
	}
	.type-tag{font-size: 12px;color: #666;background-color: aliceblue;border-radius: 4px;margin: 0 5px 0 0;padding: 3px 5px;}
	// .lists {
	// 	height: calc(100vh - 86px - 56px - 20px) !important;
	// }

	::v-deep .u-list-item-:nth-last-of-type(1) .u-cell .u-line {
		border: none !important;
	}

	::v-deep .u-navbar--fixed {
		z-index: 15;
	}

	.typeChoose ::v-deep .u-list {
		height: 200px !important;
	}
.paihang{
	width: 18px;height: 18px;background: #ccc;border-radius: 3px;text-align: center;line-height: 18px;
	position: absolute;left: 0;top: 0;z-index:2;font-size: 12px;color: #fff;
}
	.typeChoose {


		.assort,
		.area {
			width: 100%;
			display: flex;
			position: fixed;
			z-index: 12;
			background-color: #fff;

			.right,
			.left {
				position: relative;
				width: 50%;
			}

			.right {
				background: #f2f2f2;
			}
		}

		.sorts {
			width: 100%;
			max-height: 300px;
			position: fixed;
			box-sizing: border-box;
			z-index: 12;
			overflow: auto;
			background-color: #fff;
		}
	}

	::v-deep .u-fade-enter-active {
		z-index: 10 !important;
	}

	.list {
		padding: 10px 12px;
		border-bottom: 1px solid #f2f2f2;
		display: flex;
		flex-direction: row;


		.left-right {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 6px;

			.right {
				width: calc(100% - 90px - 10px);
				padding-left: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title,
				.types {
					
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

				}

				.types {
					margin-top: 10px;
					font-size: 12px;
					color: #9f9f9f
				}
			}

			.left {
				position: relative;
				width: 80px;
				// height: 100px;

				img {
					width: 80px;
					height: 80px;
					object-fit: cover;
				}
			}
		}
	}

	.search {
		// width: 94%;
		// margin: 10px auto;
		padding: 12px;
		background-color: #f5f5f5;
		
	}

	.selects {
		width: 100%;
		display: flex;
		justify-content: space-evenly;

		z-index: 12;
		border-top: 1px solid #f1f1f1;
		border-bottom: 1px solid #f1f1f1;
		background-color: #fff;


		.select {
			// width: 33.3%;
			flex: 1;
			padding: 10px 0;
			text-align: center;
			border-right: 1px solid #f1f1f1;
			background-color: #fdfdfd;

			&:nth-last-of-type(1) {
				border: none;
			}
		}
	}

	::v-deep .u-input {
		padding: 4px !important;
		border-radius: 10px;
		background: #fff;
	}

	.container {
		width: 94%;
		margin: 0 auto;
	}

	.index {
		width: 100%;
		height: 100vh;
	}
</style>